<template>
    <div style="padding: 2px">
        <a-collapse class="tabContainer" default-active-key="1" expandIconPosition="right"  :bordered="true">
            <a-collapse-panel key="1" :header="i18n('apiPreview.basicSetting','基本设置')">
                <a-form :form="form">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apiKey','接口别名')">
                                {{mdl.apiKey}}
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apiName','接口名称')">
                                {{mdl.apiName}}
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                                <a-tag v-if="statusMap[mdl.status]" :color="statusMap[mdl.status].color">
                                    <span>{{ statusMap[mdl.status].text }}</span>
                                </a-tag>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('apiPreview.updateTime','更新时间')">
                                {{mdl.updateTime}}
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.interfacePath','接口路径')">
                                <a-tag v-if="methodMap[mdl.apiType=='SOAP'?mdl.apiType:mdl.apiMethod]" :color="methodMap[mdl.apiType=='SOAP'?mdl.apiType:mdl.apiMethod].color">
                                    <span>{{ methodMap[mdl.apiType=='SOAP'?mdl.apiType:mdl.apiMethod].text }}</span>
                                </a-tag>
                                {{mdl.apiPath}}
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$ti18('rxForm.createBy','创建人')">
                                <rx-user-info :userId="mdl.createBy" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item  :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('apiPreview.remarks','备注')">
                                {{mdl.description}}
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-collapse-panel>
            <a-collapse-panel v-if="isShowPathParam || isShowHeaders || isShowQuery || isShowBody" key="2" :header="i18n('apiPreview.requestParam','请求参数')">
                <div style="padding:0 10px;">
                    <div v-if="isShowPathParam">
                        <div>{{i18n('apiPreview.pathParam','路径参数')}}</div>
                        <a-table :columns="pathParamColumns" :data-source="pathParamData" :pagination="false" :bordered="true"/>
                    </div>
                    <div v-if="isShowHeaders">
                        <h3>Headers</h3>
                        <a-table :columns="headersColumns" :data-source="headersData" :pagination="false" :bordered="true"/>
                    </div>
                    <div v-if="isShowQuery">
                        <h3>Query</h3>
                        <a-table :columns="queryColumns" :data-source="queryData" :pagination="false" :bordered="true"/>
                    </div>
                    <div v-if="isShowBody">
                        <h3>Body</h3>
                        <a-table v-if="apiDataType=='form'" :columns="bodyColumns" :data-source="bodyData" :pagination="false" :bordered="true"/>
                        <a-table v-if="apiDataType=='json'" :columns="bodyJsonColumns" :data-source="bodyDataJson" :pagination="false" :bordered="true"/>
                        <rx-monaco-editor
                            v-if="apiDataType=='xml'"
                            v-model="bodyDataXml"
                            style="height:300px;"
                        >
                        </rx-monaco-editor>
                    </div>
                </div>

            </a-collapse-panel>
            <a-collapse-panel style="margin-top: 10px;" key="3" :header="i18n('apiPreview.returnField','返回字段')">
                <a-table :columns="responsesColumns" :data-source="responsesData" :pagination="false" :bordered="true"/>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
<script>
  import SysInterfaceApiApi from '@/api/system/core/sysInterfaceApi'
  import {BaseForm, RxUserInfo, RxMonacoEditor} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'SysInterfaceApiPreview',
    mixins:[BaseForm],
    components:{
        RxUserInfo,
        RxMonacoEditor
    },
    data(){
      return {
          statusMap: {
              'DONE': {color: 'green', text: this.i18n('isProjectStatusMap.enable','启用')},
              'UNDONE': {color: 'red', text: this.i18n('isProjectStatusMap.disable','禁用')}
          },
          methodMap:{
              'SOAP': {color: 'yellow', text: 'SOAP'},
              'GET': {color: 'green', text: 'GET'},
              'POST': {color: 'blue', text: 'POST'},
              'PUT': {color: 'orange', text: 'PUT'},
              'DELETE': {color: 'red', text: 'DELETE'}
          },
          isShowHeaders:false,
          isShowPathParam:false,
          isShowQuery:false,
          isShowBody:false,
          headersColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.isRequire','是否必须'), dataIndex: 'paramRequire', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80}
          ],
          pathParamColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80}
          ],
          queryColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.isRequire','是否必须'), dataIndex: 'paramRequire', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80},
          ],
          bodyColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.isRequire','是否必须'), dataIndex: 'paramRequire', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80}
          ],
          bodyJsonColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.type','类型'), dataIndex: 'paramType', width: 80},
              {title: this.i18n('apiPreview.isRequire','是否必须'), dataIndex: 'paramRequire', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80}
          ],
          responsesColumns:[
              {title: this.i18n('apiPreview.paramName','参数名称'), dataIndex: 'paramName', width: 80},
              {title: this.i18n('apiPreview.type','类型'), dataIndex: 'paramType', width: 80},
              {title: this.i18n('apiPreview.isRequire','是否必须'), dataIndex: 'paramRequire', width: 80},
              {title: this.i18n('apiPreview.remarks','备注'), dataIndex: 'paramDesc', width: 80}
          ],
          headersData:[],
          pathParamData:[],
          queryData:[],
          bodyData:[],
          bodyDataJson:[],
          bodyDataXml:'',
          responsesData:[],
          apiDataType:''
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"sysInterfaceProject",key);
      },
      onload_(values){
          if(values.apiPathParams && values.apiPathParams!='[]'){
              this.isShowPathParam=true;
              this.pathParamData=JSON.parse(values.apiPathParams);
          }else{
              this.isShowPathParam=false;
              this.pathParamData=[];
          }
          if(values.apiHeaders && values.apiHeaders!='[]'){
              this.isShowHeaders=true;
              this.headersData=JSON.parse(values.apiHeaders).map(item=>{
                  return {...item,paramRequire:this.i18n('apiPreview.yes','是')};
              });
          }else{
              this.isShowHeaders=false;
              this.headersData=[];
          }
          if(values.apiQuery && values.apiQuery!='[]'){
              this.isShowQuery=true;
              this.queryData=JSON.parse(values.apiQuery).map(item=>{
                  return {...item,paramRequire: item.paramRequire=='YES'?this.i18n('apiPreview.yes','是'):this.i18n('apiPreview.no','否')};
              });
          }else{
              this.isShowQuery=false;
              this.queryData=[];
          }
          if(values.apiBody && values.apiBody!='[]') {
              this.isShowBody = true;
              this.apiDataType=values.apiDataType;
              if (this.apiDataType == 'form') {
                  this.bodyData = JSON.parse(values.apiBody).map(item=>{
                      return {...item,paramRequire: item.paramRequire=='YES'?this.i18n('apiPreview.yes','是'):this.i18n('apiPreview.no','否')};
                  });
              } else if (this.apiDataType == 'json') {
                  this.bodyDataJson = this.parseParamRequire(JSON.parse(values.apiBody));
              } else if (this.apiDataType == 'xml') {
                  this.bodyDataXml = values.apiBody;
              }
          }else{
              this.isShowBody=false;
              this.apiDataType='';
              this.bodyData=[];
              this.bodyDataJson=[];
              this.bodyDataXml='';
          }
          if(values.apiReturnFields && values.apiReturnFields!='[]'){
              this.responsesData=this.parseParamRequire(JSON.parse(values.apiReturnFields));
          }else{
              this.responsesData=[];
          }
      },
      parseParamRequire(data){
          return data.map(item=>{
              if(item.children){
                  item.children=this.parseParamRequire(item.children);
              }
              return {...item,paramRequire: item.paramRequire?this.i18n('apiPreview.yes','是'):this.i18n('apiPreview.no','否')};
          });
      },
      get(id){
        return SysInterfaceApiApi.get(id);
      },
      save(values){
        return SysInterfaceApiApi.save(values);
      }

    }
  }
</script>
<style>
    .interface-title{
        clear: both;
        font-weight: 400;
        margin-bottom: .16rem;
        border-left: 3px solid #2395f1;
        padding-left: 8px;
    }
</style>
